<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current">
        <header class="bar bar-nav shop-header">
          <h1 class="title">STEP1：填写订单</h1>
        </header>
        <div class="content" style="margin-bottom: 2.7rem;">
          
          <div class="list-block media-list sku-info">
            <ul>
              <li class="item-content">
                <div class="item-media"><img src="${cloud.prod}/${product.cover}" style='width: 4rem;'></div>
                <div class="item-inner">
                  <div class="item-title">${product.name}</div>
                  <div class="item-text"><span>￥</span><fmt:formatNumber value="${product.currentOffer / 100}"  pattern="0.00" maxFractionDigits="2" /></div>
                </div>
              </li>
            </ul>
          </div>
          
          <c:if test="${not empty siteSelect}">
          <div class="list-block shop-list">
            <ul>
              <li>
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title label" style="width: 26%;">门店：</div>
                    <div class="item-input">
                      <input type="text" name="siteSelector" placeholder="请选择门店">
                      <input type="hidden" name="site">
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          </c:if>
          
          <div class="list-block shop-list">
            
            <ul>
            <input  type="hidden" name="contactName" placeholder="请填写中文全名" value="${user.name== null ? 'null': user.name}" ${user.name == null ? '' : 'readonly'}>

              <!-- Text inputs -->
              <!-- <li>
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title label" style="width: 26%;">姓名：</div>
                    <div class="item-input">
                      <input type="text" type="hidden" name="contactName" placeholder="请填写中文全名" value="${user.name}" ${user.name == null ? '' : 'readonly'}>
                    </div>
                  </div>
                </div>
              </li> -->
              <c:if test="${!product.type.others}">
                    <input  type="hidden" name="wechatNumber" placeholder="请输入下单人微信号" value="${user.wechat.code== null ? 'nulllll': user.wechat.code}" ${user.wechat.code == null ? '' : 'readonly'}>

                <!-- <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label" style="width: 26%;">微信号：</div>
                      <div class="item-input">
                        <input type="text" type="hidden" name="wechatNumber" placeholder="请输入下单人微信号" value="${user.wechat.code}">
                      </div>
                    </div>
                  </div>
                </li> -->

              </c:if>
              <c:choose>
                <c:when test="${user.mobileBinded}">
                    <input  type="hidden" name="contactMobile" class="text-right" placeholder="填写联系人手机" value="${user.mobile}" ${user.mobile == null ? '' : 'readonly'}>

                  <!-- <li class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">${user.email ? '邮箱' : '手机' }</div>
                      <div class="item-input">
                        <input type="tel" type="hidden" name="contactMobile" class="text-right" placeholder="填写联系人手机" value="${user.mobile}" ${user.mobile == null ? '' : 'readonly'}>
                      </div>
                    </div>
                  </li> -->
                </c:when>
                <c:otherwise>
                  <li>
                    <a class="item-content item-link" href="#mobile-bind" data-toggle="push">
                      <div class="item-inner">
                        <div class="item-tile">手机：</div>
                        <div class="item-after">
                          请绑定手机号
                          <input type="hidden" name="contactMobile" value="">
                        </div>
                      </div>
                    </a>
                  </li>
                </c:otherwise>
              </c:choose>
              <c:if test="${product.type.others}">
                <input type="hidden" name="wechatNumber" value="${user.wechat.code}">
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label" style="width: 26%;">身份证号：</div>
                      <div class="item-input">
                        <input type="text" name="identificationCard" placeholder="请输入下单人身份证号" value="">
                      </div>
                    </div>
                  </div>
                </li>
                <li class="textarea">
                  <div class="item-content">
                    <div class="item-title label">地址：</div>
                    <div class="item-input">
                      <textarea class="text-left" name="address" placeholder="请输入您的地址"></textarea>
                    </div>
                  </div>
                </li>
              </c:if>
            </ul>
            
          </div>
          
          <div class="list-block shop-list">
            
            <ul>
              <c:if test="${product.type.others}">
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">数量：</div>
                      <div class="item-after">
                        <div id="amount-control-1" class="amount-control" data-toggle="amount-control" data-maximum="10">
                          <a href="javascript:void(0)" data-decrease="1" data-target="#amount-control-1" class="amount-button minus"></a>
                          <input type="tel" name="quantity" value="1" data-price="169900" data-role="amount" class="amount" readonly>
                          <a href="javascript:void(0)" data-increase="1" data-target="#amount-control-1" class="amount-button plus"></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </c:if>
              <!-- <li>
                <div class="item-content item-link">
                  <div class="item-inner">
                    <div class="item-title label">请选择门店：</div>
                    <div class="item-input">
                      <input type="email" placeholder="三家可用门店">
                    </div>
                  </div>
                </div>
              </li> -->
              <c:if test="${!product.onlineYear}">
                <c:choose>
                  <c:when test="${couponAmount > 0}">
                    <a href="#coupon-select" data-toggle="push" class="item-content item-link">
                      <div class="item-inner">
                        <div class="item-title">可用优惠券：</div>
                        <div class="item-after">${couponAmount}&nbsp;张</div>
                      </div>
                    </a>
                  </c:when>
                  <c:otherwise>
                    <div class="item-inner">
                      <div class="item-title">可用优惠券：</div>
                      <div class="item-after">0&nbsp;张</div>
                    </div>
                  </c:otherwise>
                </c:choose>
                
              </c:if>
              <c:if test="${product.type.online or product.course.couldSelectCode()}">
                <a href="#discount-code-select" data-toggle="push" class="item-content item-link">
                  <div class="item-inner">
                    <div class="item-title">折扣码：</div>
                    <div class="item-after"></div>
                  </div>
                </a>
              </c:if>
            </ul>
            
          </div>
          
          <%-- <div class="list-block shop-list">
            <ul>
              <c:if test="${product.type.online and !product.onlineYear}">
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label" style="width: 26%;">身高：</div>
                      <div class="item-input">
                        <input type="text" name="height" placeholder="请输入整数" value="">
                      </div>
                      <div class="label pull-right" style="width: 5%;font-size: 0.7rem;">cm</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label" style="width: 26%;">体重：</div>
                      <div class="item-input">
                        <input type="text" name="weight" placeholder="精确到小数点后一位" value="">
                      </div>
                      <div class="label pull-right" style="width: 5%;font-size: 0.7rem;">kg</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label" style="width: 26%;">时差：</div>
                      <div class="item-input">
                        <input type="text" name="hourDifference" placeholder="海外党请填写" value="">
                      </div>
                      <div class="label pull-right" style="width: 5%;font-size: 0.7rem;">h&nbsp;&nbsp;</div>
                    </div>
                  </div>
                </li>
              </c:if>
              <li class="textarea">
                <div class="item-content">
                  <div class="item-title label">备注：</div>
                  <div class="item-input">
                    <textarea class="text-left" name="comment" placeholder="你想告诉人马君...."></textarea>
                  </div>
                </div>
              </li>
            </ul>
          </div> --%>


          <div class="product-detial-tabs"> 
              <div class="buttons-tab fixed-tab fs-tabs" data-offset="44">
                <a href="#description" class="tab-link active button">详情</a>
                <!-- <a href="#consultant" class="tab-link button">咨询</a> -->
              </div>
              <div class="content-block no-margin">
                <div class="tabs">
                  <div id="description" class="tab active">
                    <div class="content-block no-margin" style="padding: .6rem 0;">
                      ${product.description}
                    </div>
                  </div>
                  <div id="consultant" class="tab">
                    <div class="content-block">
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                      <p>This is tab 2 content</p>
                    </div>
                  </div>
                </div>
              </div>
              <c:if test="${product.type.online}">
                <div class="to_qa" style="text-align: center;">
                  <!-- <img alt="to_qa.png" src="${ctx.host}/resource/image/to_qa.png" style="margin-bottom: 3rem;"> -->
                </div>
                <div class="qa" style="text-align: center;display: none;">
                  <img alt="qa.jpg" src="${ctx.host}/resource/image/qa.jpg" width="100%">
                </div>
              </c:if>
            </div>
          
        </div>
        <!-- End Content -->
        
        <nav class="bar bar-footer shop-footer">
            <p class="buy-cost">总计：<span class="bill-type">￥</span><span class="total-cost"><fmt:formatNumber value="${product.currentOffer / 100}"  pattern="0.00" maxFractionDigits="2" /></span></p>
            <a href="#" class="button button-fill button-order">确认</a>
        </nav>
        <!-- End Footer -->
        
      </div>
    </div>

    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/trading/shop3.js" />
    <script type="text/javascript">
      var jsConfig = JSON.parse('${wechatJsConfig}')
      var sites = '${siteSelect}' == '' ? null : JSON.parse('${siteSelect}')
      require(['page/trading/shop3'], function(page) {
        page.init({
          jsConfig: jsConfig,
          product: {id: "${product.id}", name: "${product.name}", amount: "${product.currentOffer}", type: "${product.type.alias}", onlineYear: "${product.onlineYear}"},
          sites: sites
        })
      })
    </script>
    
  </body>
</html>